import { getUserList } from '@/api/user';
import { Button, Popconfirm, Space,Image,Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useState, type FC, useEffect } from 'react';

interface AccountListProps {}

interface DataType {
  avatar: string
  birthday: string
  createTime: string
  email: string
  nickname: string
  qq: string
  sex: number
  tel: string
  userid: string
  username: string
  wx: string
}

const AccountList: FC<AccountListProps> = () => {

  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [height] = useState(document.body.offsetHeight) // 计算body的高度

  const [userList, setUserList] = useState<DataType[]>([])

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      render: (text: any, record: DataType, index: number) => {
        return <span>{ (current - 1) * pageSize +  index + 1 }</span>
      }
    },
    {
      title: '手机号',
      dataIndex: 'tel'
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      render: (text: string) => {
        return  <Image width={60} src={ text }/>
      }
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      render: (text: string) => {
        const time = new Date(Number(text))
        const d = time.toLocaleDateString()
        const h = time.toLocaleTimeString()
        return  <span>{d + ' ' + h }</span>
      }
    },
    {
      title: '操作',
      render: (text: any, record: DataType) => {
        return (
          <Space>
            <Button type="dashed" onClick={() => {
            }}>编辑</Button>
            <Popconfirm
              title="删除"
              description="确定删除吗?"
              onConfirm={ () => {
              }}
              onCancel={() => {}}
              okText="确定"
              cancelText="取消"
            >
              <Button danger>删除</Button>
            </Popconfirm>
          </Space>
        )
      }
    }
  ]
  useEffect(() => {
    getUserList().then(res => {
      console.log(res.data.data)
      setUserList(res.data.data)
    })
  }, [])
  return (
    <Space direction='vertical' style={{width:'100%'}}>
      <Table
      dataSource={userList}
      columns={columns}
      rowKey='userid'
      scroll={{y:height-300}}
      pagination={{
        current,
        pageSize,
        showSizeChanger: true,
          pageSizeOptions: [5, 10, 20, 50],
          showQuickJumper: true,
          showTotal: (total) => `共有 ${total} 条数据`,
          onChange: (page, pageSize) => {
            setCurrent(page)
            setPageSize(pageSize)
          }
      }}>

      </Table>
    </Space>
  );
}

export default AccountList;
